<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./cm/lib/codemirror.css">
    <link rel="stylesheet" href="./style.css">
    <style>
        .CodeMirror-activeline {
            background: #537484;
        }
    </style>
    <script src="./cm/lib/codemirror.js"></script>

    <script src="./cm/addon/edit/matchbrackets.js"></script>
    <script src="./cm/addon/selection/active-line.js"></script>

    <script src="./cm/addon/search/search.js"></script>
    <script src="./cm/addon/search/searchcursor.js"></script>
    <script src="./cm/addon/search/match-highlighter.js"></script>
    <script src="./cm/addon/search/jump-to-line.js"></script>

    <script src="./cm/addon/dialog/dialog.js"></script>
    <link rel="stylesheet" href="./cm/addon/dialog/dialog.css">

    <link rel="stylesheet" href="./cm/addon/hint/show-hint.css">
    <script src="./cm/addon/hint/show-hint.js"></script>
    <script src="./cm/addon/hint/anyword-hint.js"></script>


    <script src="./cm/addon/mode/simple.js"></script>
    <link rel="stylesheet" href="./cm/theme/material.css">
    <script>
        function reset_layout() {
            let e = 'px'
            let siderbar_width = 160
            let tabs_height = 30

            let sidebar = document.getElementById('sidebar')
            let content = document.getElementById('content')
            let tabs = document.getElementById('content-tabs')
            let editor = document.getElementById('content-editor')
            let w = document.body.clientWidth
            let h = document.body.clientHeight
            sidebar.style.width = siderbar_width + e
            content.style.width = w - siderbar_width + e
            tabs.style.height = tabs_height + e
            editor.style.height = h - tabs_height + e
        }

        CodeMirror.defineSimpleMode('rmasm', {
            start: [
                {regex: /(".*?")/, token: "string"},

                {regex: /[^\w](true|false|null|self|result)[^\w]|\w+:/, token: "atom"},
                {
                    regex: /0[xX][\dabcdefABCDEF]+|[01]+[bB]|\d+(\.\d+)?/i,
                    token: "number"
                },
                {regex: /^(#|\/\/).*$/, token: "comment"},
                // {regex: / not |\!| abs | log | log10 | floor | ceil | sqrt | rand | sin | doc | tan | asin | acos | atan | add | sub | mul | div | idiv | mod | pow |\+|\-|\*|\/|\/\/|%|^| equal | notEqual | land | lessThan | lessThanEq | greaterThan | greaterThanEq | strictEqual | shl | shr |==|!=|&&|<|<=|>|>=|===|<<|>>| or | and |\|\||\||&| xor | max | min | angle | len | noise |=/, token: "operator"},
                {
                    regex:
                        /[\+\-\*\/=!^\|&%><]| not | log | log10 | floor | ceil | sqrt | rand | sin | doc | tan | sub | mul | div | idiv | mod | pow | equal | notEqual | land | lessThan | lessThanEq | greaterThan | greaterThanEq | strictEqual | shl | shr | or | xor | max | min | len | noise /,
                    token: "operator"
                },
                {regex: /[\{\[\(:]/, indent: true},
                {regex: /[\}\]\):]/, dedent: true},
                {regex: /<(\w+|:[ ,\w]+|\w+ +as +\w+|\w+ *= *\w)>/, token: "variable"},
                {
                    regex: /(?:let|import|define|if|else|while|for|jump|end|position|eval|@\w+)/,
                    token: "keyword"
                },
            ]
        })

        function on_editor_load() {
            cod = CodeMirror.fromTextArea(
                document.getElementById('editor'),
                {
                    theme: 'material',
                    lineNumbers: true,
                    mod: 'rmasm',
                    matchBrackets: true,
                    indentUnit: 4,
                    smartIndent: true,
                    styleActiveLine: true,
                }
            )
            cod.defaultTextHeight(22)
            cod.setSize('100%', '100%')
            cod.setValue(`
# WEB 翻译器
            `.trim())
            cod.on('change', function (args, o) {
                let match = /^[a-zA-Z_]$/
                if (match.test(o.text[0])) {
                    cod.showHint({
                        // completeOnSingleClick: false,
                        completeSingle: false
                    })
                }
            })
        }
    </script>
</head>
<body onresize="reset_layout()" onload="reset_layout()">
<div id="sidebar" class="zb">
    <div id="sidebar-top">
        <button class="rm button main" onclick="translate_copy(event)">翻译+复制</button>
        <button class="rm button" onclick="translate_cat(event)">翻译+查看</button>
    </div>
    <div id="sidebar-bottom">
        <button class="rm button" onclick="click_import(event)">导入</button>
        <button class="rm button" onclick="click_save(event)">保存</button>
        <button class="rm button" onclick="click_help(event)">关于</button>
    </div>
</div>
<div id="content" class="zb">
    <div id="content-tabs" class="zb">
        <button class="rm tab" id="tab-0" onclick="click_tab0()">R-MASM</button>
        <button class="rm tab" id="tab-1" onclick="click_tab1()">逻辑块指令</button>
    </div>
    <div id="content-editor" class="zb">
        <textarea id="editor"></textarea>
    </div>
</div>
<script>on_editor_load()</script>
</body>
<script src="./js.js"></script>
</html>